.x-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: all 0.3s ease;
  
  &:focus {
    outline: none;
    border-color: $color-primary;
    box-shadow: 0 0 0 3px rgba($color-primary, 0.1);
  }
  
  &--error {
    input {
      border-color: #ff4d4f;
      
      &:focus {
        box-shadow: 0 0 0 3px rgba(#ff4d4f, 0.1);
      }
    }
  }
}
